<template>
  <!-- 上传 -->
  <div class="qrcode-container">
    <div class="backbar fix-bar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.go(-1)">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="group-container">
      <div class="qrcode-wrapper">
        <div class="info flexbox justify-center">
          <div class="info-item head">
            <img :src="info.headUrl" alt class="head-url" />
          </div>
          <div class="info-item basic-info flexbox column justify-around">
            <div class="group-owner">
              <span class="owner-name">{{ info.nickname }}</span>
            </div>

            <div class="group-id">
              <span v-if="info.score">积分: {{ info.score }} </span>
              <span>群聊ID: {{ info.userId }}</span>
            </div>
          </div>
        </div>

        <div class="qrcode-image">
          <span v-if="qrUrl === ''">
            用户还未上传二维码.
          </span>
          <img v-else :src="qrUrl" alt />
        </div>

      </div>

    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { RawLocation } from "vue-router";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { Webim } from '@/utils/types';
import { Api } from '@/api/http';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<UserQrcode>({
  mixins: [MessageMixin],
})
export default class UserQrcode extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  @userModule.State("memberInfo") memberInfo: any;

  private eventList: Array<string> = [
    "$getUserQrcode",
  ];

  private status: boolean = true;
  private userId: string = '';

  private score: any = 0;

  private group: any = {
  };

  private qrUrl: string = '';
  // 预览
  private info: any = {};

  // 能否进行编辑
  private allowEdit: boolean = false;

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);

    this.sendMessage(MsgTypeKV.getUserQrcode, {
      imAccount: this.memberInfo.fromAccount,
    });

  }

  /**
   * 获取到用户qrcode
   */
  private $getUserQrcode(data: any) {
    let payQr = data.info.payQr;
    this.score = data.info.score || '';
    this.status = data.info.status || '';
    if (payQr) {
      this.qrUrl = payQr;
    }
    this.info = data.info;
  }

}
</script>

<style lang="stylus" scoped>
.qrcode-container
  background #efefef
  width 100% 
  height 100% 
.group-container
  width 100%
  height 100%
  background #efefef
  padding 12px
  box-sizing border-box
  .qrcode-wrapper 
    background white
    padding 24px
    border-radius 4px
    .info
      display flex
      .head 
        flex-basis 18%
        .head-url 
          width 100%
          border-radius 8px
      .basic-info
        flex-basis 82%
        padding-left 16px
        .group-level, .group-id
          color #898989
          text-align left
          font-size 14px
        .group-owner
          text-align left
    .qrcode-image
      height 300px
      margin-top 44px
      position relative
      img 
        width 90%
        height 90%
  .action
    margin-top 10px
    .upload-qrcode 
      background rgb(87, 189, 113)
      width 180px
      height 40px
      line-height 40px
      border-radius 4px
      color white
      position relative
      font-size 18px
      input
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        opacity 0
.gender-icon
  font-size 18px
  &.fa-male
    color #940592;
  &.fa-female
    color #f44778

.owner-name
  display inline-block
  margin-right 18px

.tip
  font-size 12px 
  color #909090

</style>

